/* --------------------------------------------- */
/* Author: http://codecanyon.net/user/CodingJack */
/* --------------------------------------------- */

/* LEGEND
   
    1 - GLOBAL STYLES - (line #26)
  
     1.1 - The Big Button - (line #39)
	   1.2 - The Music Player - (line #75)
	   
	2 - WHITE SKIN - (line #225)
	2 - BLACK SKIN - (line #340)
	2 - GRAY SKIN - (line #439)
   
*/

/* CSS3 resources to help with editing:

	GRADIENTS: http://www.colorzilla.com/gradient-editor/
	SHADOWS: http://css3gen.com/box-shadow/
	ROUNDED CORNERS: http://border-radius.com/
	MORE (including inset shadows): http://css3generator.com/ and http://www.css3.me/


/* ...........................................................................   1   */

/* The main plugin wrapper */
.cj-music-player {
	
	font: 12px "Droid Sans", sans-serif;
	text-align: left;
	line-height: 12px;
	position: relative;
	height: 50px;
	
}

/* -----------------------------------------------------------   1.1   */

/* The big button */
.cj-music-button {

	width: 39px;
	height: 39px;
	position: absolute;
	top: 0;
	cursor: pointer;
	
	-webkit-border-radius: 22px;
	-moz-border-radius: 22px;
	border-radius: 22px;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	
}

/* The big button icon */
.cj-music-button img {

	margin: 11px 0 0 10px;
	
}

/* We hide the song list markup */
.cj-song-list {

	display: none;
	
}

/* -----------------------------------------------------------   1.2   */

/* The main player wrapper */
.cj-music-container {
	
	position: absolute;
	top: 3px;
	left: 22px;
	width: 252px;
	height: 32px;
	display: none;
	overflow: hidden;
	white-space: nowrap;
	
	-webkit-border-radius: 17px;
	-moz-border-radius: 17px;
	border-radius: 17px;
	
}

/* An adjustment automatically applied when the big button isn't used */
.cj-sm-music-no-button {

	/* sr width: 217px;*/
	width: 200px;
	
}
.cj-music-no-button {

	/* sr width: 217px;*/
	width: 400px;
	
}

/* The text and controls */ 
.cj-music-content {

	padding: 0 49px 0 11px;
		
}

/* The current song anumber and title */
.cj-music-meta {

	display: inline-block;
	
}

/* The meta tag containers */
.cj-music-meta p {
	
	position: absolute;
	top: 11px;
	margin: 0;
	
}

/* The 1px vertical dividers */
.cj-music-meta .cj-divider {
	
	position: absolute;
	top: 0;
	display: block;
	height: 33px;
	
}

/* The first divider */
.cj-divider-one {
	
	left: 42px;
	
}

/* The second divider */
.cj-divider-two {
	
	left: 134px;
	
}

/* The current song text */
.cj-sm-current-song {

	/* sr width: 70px; */
	width: 150px;
	height: 28px;
	overflow: hidden;
	/* sr left: 54px; */
	left: 15px; 
	
}
.cj-current-song {

  /* sr width: 70px; */
  width: 300px;
  height: 28px;
  overflow: hidden;
  /* sr left: 54px; */
  left: 15px;
 
}


/* The play, pause, left and right buttons */
.cj-sm--music-controls {
	
	display: inline-block;
	/* sr margin-left: 130px; */
	margin-left: 160px;
	padding-top: 6px;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	
}

.cj-music-controls {
 
  display: inline-block;
  /* sr margin-left: 130px; */
  margin-left: 340px;
  padding-top: 6px;
 
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
 
}

/* Each button exists inside a span tag */
.cj-music-controls span {
	
	width: 18px;
	height: 18px;
	
	cursor: pointer;
	display: inline-block;
	
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	border-radius: 11px;

}

/* button mouse over style */
.cj-music-controls span:hover {

	zoom: 1;
    filter: alpha(opacity=65);
    opacity: 0.65;
	
}

/* The previous song button icon */
.cj-music-left img {
	
	margin: 5px 0 0 6px;

}

/* The next song button icon */
.cj-music-add img {
	
	margin: 5px 0 0 7px;

}

/* The next song button icon */
.cj-music-right img {
	
	margin: 5px 0 0 7px;

}

/* The play button icon */
.cj-music-play img {
	
	margin: 5px 0 0 7px;

}

/* The pause button icon */
.cj-music-pause img {
	
	margin: 5px 0 0 6px;

}

/* ...........................................................................   2   */

/* Text color and text shadow */
.cj-white-skin {

	color: #000;
	text-shadow: 1px 1px 0 #FFF;
	
}

/* Hyperlinks */
.cj-white-skin a {

	color: #AAA;
	text-decoration: none;
	outline: none;
	
}

/* Hyperlink visited */
.cj-white-skin a:visited {

	color: #AAA;
	
}

/* Hyperlink mouse over */
.cj-white-skin a:hover {

	color: #999;
	
}

/* The big button */
.cj-white-skin .cj-music-button {
	
	border: 2px solid #FFF;
	
	background: #EEE url(/images/audioplayer/white_ie_btn.png) repeat-x;
	background: -moz-linear-gradient(top, #FFF 0%, #EEE 99%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFF), color-stop(99%, #EEE)); 
	background: -webkit-linear-gradient(top, #FFF 0%, #EEE 99%); 
	background: -o-linear-gradient(top, #FFF 0%, #EEE 99%); 
	background: -ms-linear-gradient(top,  #FFF 0%, #EEE 99%); 
	background: linear-gradient(top, #FFF 0%, #EEE 99%); 
	
	-moz-box-shadow: 0px 2px 5px #DDD;
    -webkit-box-shadow: 0px 2px 5px #DDD;
    box-shadow: 0px 2px 5px #DDD;
	filter: progid:DXImageTransform.Microsoft.Shadow(Direction=145, Strength=3, Color="#DDDDDD");
	
}

/* The big button active/open state */
.cj-music-btn-active-white {
	
	background: #EEE url(/images/audioplayer/white_ie_btn_active.png) repeat-x;
	background: -moz-linear-gradient(top, #EEE 0%, #FFF 99%) !important; 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEE), color-stop(99%, #FFF)) !important;
	background: -webkit-linear-gradient(top, #EEE 0%, #FFF 99%) !important;
	background: -o-linear-gradient(top, #EEE 0%, #FFF 99%) !important;
	background: -ms-linear-gradient(top,  #EEE 0%, #FFF 99%) !important;
	background: linear-gradient(top, #EEE 0%, #FFF 99%) !important;
	
}

/* The main player */
.cj-white-skin .cj-music-container {

	border: 2px solid #FFF;
	border-bottom: 2px solid #F5F5F5;
	
	background: #FFF url(/images/audioplayer/white_ie_ctrl.png) repeat-x; 
	background: -moz-linear-gradient(top, #EEE 0%, #FFF 99%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEE), color-stop(99%, #FFF)); 
	background: -webkit-linear-gradient(top, #EEE 0%, #ffffff 99%); 
	background: -o-linear-gradient(top, #EEE 0%, #FFF 99%); 
	background: -ms-linear-gradient(top,  #EEE 0%, #FFF 99%); 
	background: linear-gradient(top, #EEE 0%, #FFF 99%); 

	-moz-box-shadow: 0px 2px 5px #CCC;
    -webkit-box-shadow: 0px 2px 5px #CCC;
    box-shadow: 0px 2px 5px #DDD;
	filter: progid:DXImageTransform.Microsoft.Shadow(Direction=180, Strength=3, Color="#DDDDDD");
	
}

/* The 1px vertical dividers */
.cj-white-skin .cj-music-meta .cj-divider {
	
	border-left: 1px solid #FFF;
	border-right: 1px solid #DDD;
	
}

/* The player control buttons */
.cj-white-skin .cj-music-controls span {

	border: 1px solid #E6E6E6;
	border-bottom: 1px solid #DDD;
	
	-moz-box-shadow: inset 0 0 3px #FFF;
    -webkit-box-shadow: inset 0 0 3px #FFF;
    box-shadow: inset 0 0 3px #FFF;
	
	background: #DDD url(/images/audioplayer/white_ie_small_btn.png);
	background: -moz-linear-gradient(top, #FFF 0%, #DDD 99%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFF), color-stop(99%, #DDD)); 
	background: -webkit-linear-gradient(top,  #FFF 0%, #DDD 99%); 
	background: -o-linear-gradient(top, #FFF 0%, #DDD 99%); 
	background: -ms-linear-gradient(top, #FFF 0%, #DDD 99%); 
	background: linear-gradient(top, #FFF 0%, #DDD 99%); 
	
}

/* ...........................................................................   3   */

/* Text color */
.cj-black-skin {

	color: #999;
	
}

/* Hyperlinks */
.cj-black-skin a {

	color: #999;
	text-decoration: none;
	outline: none;
	
}

/* Hyperlinks visited */
.cj-black-skin a:visited {

	color: #999;
	
}

/* Hyperlinks on mouse over */
.cj-black-skin a:hover {

	color: #AAA;
	
}

/* The big button */
.cj-black-skin .cj-music-button {
	
	border: 2px solid #353535;
	background-color: #444;
	
	-moz-box-shadow: inset 0 -2px 10px #111;
    -webkit-box-shadow: inset 0 -2px 10px #111;
    box-shadow: inset 0 -2px 10px #111;
	
}

/* The big button active/open state */
.cj-music-btn-active-black {

	border: 2px solid #3C3C3C !important;
	
}

/* The main player */
.cj-black-skin .cj-music-container {

	border: 2px solid #333;
	background-color: #333;

	-moz-box-shadow: inset 0 0 4px #000;
    -webkit-box-shadow: inset 0 0 4px #000;
    box-shadow: inset 0 0 4px #000;
	
}

/* 1px adjustment from global style for appearance */
.cj-black-skin .cj-music-meta p {

	top: 10px;
	
}

/* The song numbers */
.cj-black-skin .cj-music-meta p.cj-music-numbers {
	
	padding-left: 1px;
	
}

/* The 1px vertical dividers */
.cj-black-skin .cj-music-meta .cj-divider {
	
	border-left: 1px solid #000;
	border-right: 1px solid #555;
	
}

/* The music player controls */
.cj-black-skin .cj-music-controls span {
	
	background-color: #333;
	
	border: 1px solid #444;
	border-top: 1px solid #555;
	
	-moz-box-shadow:inset 0 0 3px #000;
    -webkit-box-shadow:inset 0 0 3px #000;
    box-shadow:inset 0 0 3px #000;
	
}

/* ...........................................................................   4   */

/* Text color */
.cj-gray-skin {

	color: #CCC;
	
}

/* Hyperlinks */
.cj-gray-skin a {

	color: #CCC;
	text-decoration: none;
	outline: none;
	
}

/* Hyperlinks visited */
.cj-gray-skin a:visited {

	color: #CCC;
	
}

/* Hyperlinks on mouse over */
.cj-gray-skin a:hover {

	color: #BBB;
	
}

/* The big button */
.cj-gray-skin .cj-music-button {
	
	border: 2px solid #888;
	background-color: #777;
	
	-moz-box-shadow: inset 0 -2px 15px #4D4D4D;
    -webkit-box-shadow: inset 0 -2px 15px #4D4D4D;
    box-shadow: inset 0 -2px 15px #4D4D4D;
	
}

/* The big button active/open state */
.cj-music-btn-active-gray {

	border: 2px solid #777 !important;
	
}

/* The main player */
.cj-gray-skin .cj-music-container {

	border: 2px solid #888;
	background: #777 url(/images/audioplayer/controls.png);

	-moz-box-shadow: inset 0 0 4px #4D4D4D;
    -webkit-box-shadow: inset 0 0 4px #4D4D4D;
    box-shadow: inset 0 0 4px #4D4D4D;

}

/* 1px adjustment from global style for appearance */
.cj-gray-skin .cj-music-meta p {

	top: 10px;
	
}

/* The song numbers */
.cj-gray-skin .cj-music-meta p.cj-music-numbers {
	
	padding-left: 1px;
	
}

/* The 1px vertical dividers */
.cj-gray-skin .cj-music-meta .cj-divider {
	
	border-left: 1px solid #666;
	border-right: 1px solid #999;
	
}

/* The player controls */
.cj-gray-skin .cj-music-controls span {
	
	background-color: #5E5E5E;
	
	border: 1px solid #888;
	border-top: 1px solid #777;
	
	-moz-box-shadow: inset 0 0 3px #333;
    -webkit-box-shadow: inset 0 0 3px #333;
    box-shadow: inset 0 0 3px #333;
	
}




